<template>
  <div class="sceneCard">
    <el-row class="pointer">
      <div @click="deleteScene">
        <img class="deleteIcon" src="@/assets/images/delete-active.png" />
      </div>
      <el-col :offset="8" :span="8">
        <img :src="picFile" height="92" />
      </el-col>
    </el-row>
    <el-row>
      <el-col class="textOverflow">
        {{ title }}
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { deleteSceneById } from "@/services/scene";
import { ElMessage } from "element-plus";

defineProps({
  id: String,
  title: String,
  picFile: String,
});

async function deleteScene() {
  try {
    const res = await deleteSceneById({ id: this.id });
    ElMessage({
      message: res?.message,
      type: "success",
    });
  } catch (e) {
    ElMessage({
      message: e.message,
      type: "error",
    });
  }
}
</script>

<style lang="scss" scoped>
@mixin translation {
  transition: box-shadow 0.6s ease 0s;
}

.sceneCard {
  width: 100%;
  padding: 5px;
  border-radius: 12px;
  border: solid 1px #dedede;
  @include translation;

  &:hover {
    box-shadow: 0px 0px 12px #cdcdcd;

    .deleteIcon {
      display: block;
      opacity: 1;
      z-index: 1;
    }
  }

  .deleteIcon {
    z-index: -1;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    transition: opacity 0.6s ease 0s;
  }

  img {
    width: 100px;
  }

  .textOverflow {
    overflow: hidden; // 超出内容隐藏
    text-overflow: ellipsis; // 用省略号来代表被隐藏掉的文本
    white-space: nowrap; // 强制文本在一行显示
    text-align: center;
  }

  .pointer {
    cursor: pointer;
  }
}
</style>